{% extends 'base.html' %}

{% block subtitle %}
  Lesson
{% endblock subtitle %}

{% block top_content %}
{% endblock %}

{% block main_content %}

<div class="gcb-main">
  <ul class="gcb-breadcrumb">
    <li><a href="course">{% trans %} Course {% endtrans %}</a></li>
    <li><a href="unit?unit={{ units.unit_id }}">
      {% trans %} Unit {% endtrans %} {{ units.unit_id }}</a></li>
    <li>{% trans %} Lesson {% endtrans %} {{ lesson_id }}</li>
  </ul>
  <div>
    <h1 class="class_header">
      {{ gettext('Unit %(id)s - %(title)s', id=units.unit_id, title=units.title) }}
    </h1>
  </div>

  <div class="gcb-nav" id="gcb-nav-y">
    <ul>
      {{course_info.unit.after_leftnav_begins}}
      {% for lesson in lessons %}
      <li
        {% if lesson.id == lesson_id %}
        class="active"> {{ unit_id }}.{{ lesson.id }}<br>{{ lesson.title }}
        {% else %}
        ><a href="unit?unit={{ unit_id }}&lesson={{ lesson.id }}" >{{ unit_id }}.{{ lesson.id }} {{ lesson.title }}</a>
        {% endif %}

        {% if lesson.activity %}
          <ul><li><a href="activity?unit={{ unit_id }}&lesson={{ lesson.id }}">
            {% trans %} Activity {% endtrans %}
          </a></li></ul>
        {% endif %}
      </li>
      {% endfor %}
      {{course_info.unit.before_leftnav_ends}}
    </ul>
  </div>

  <div class="gcb-article tab-content" role="main">
    {{course_info.unit.after_content_begins}}
    {% for lesson in lessons %}
      {% if lesson.id == lesson_id %}

        <div style="padding-bottom: 20px;">
          <div class="gcb-aside gcb-button-box">
            <div class="gcb-cols">
              <div class="gcb-col-7">
                <h1 class="lesson_title">
                  {{ lesson.title }}
                </h1>
                {% if lesson.objectives %}
                  <div class="lesson_objective">
                    {{ lesson.objectives }}
                  </div>
                {% endif %}
                </div>
              <div class="gcb-col-3">
                <p style="float:right; margin-top: 0px;">
                  <a class="gcb-button gcb-button-primary" href="{{ lesson.notes }}" target="_blank">
                    {% trans %} Text Version {% endtrans %}
                  </a>
                </p>
              </div>
            </div><!-- /gcb-cols -->
            {% if lesson.video %}
              <p class="video-container">
                <iframe class="youtube-player" title="{% trans %} YouTube Video Player {% endtrans %}" type="text/html" width="650" height="400"
                 src="http://www.youtube.com/embed/{{ lesson.video }}?feature=player_embedded&rel=0" frameborder="0" allowfullscreen></iframe>
              </p>
            {% endif %}
          </div><!-- /gcb-aside -->

          <div class="gcb-button-box">
            <div class="prev-button" style="float:left; margin-top: 0px; margin-left: 40px;">
              {% if back_button_url %}
                <a href="{{ back_button_url }}">
                  {% trans %} Previous Page {% endtrans %}
                </a>
              {% endif %}
            </div>
            <div class="next-button" style="float:right; margin-top: 0px; margin-right: 40px;">
              {% if next_button_url %}
                <a href="{{ next_button_url }}">
                  {% trans %} Next Page {% endtrans %}
                </a>
              {% else %}
                <a href="course">
                  {% trans %} End {% endtrans %}
                </a>
              {% endif %}
            </div>
          </div>
        </div>
      {% endif %}
    {% endfor %}
    {{course_info.unit.before_content_ends}}
  </div>
</div>

{% endblock %}
